<template>
  <view class="notice-list-container">
    <!-- 通知列表 -->
    <view class="notice-list" v-if="noticeList.length > 0">
      <view class="notice-item" v-for="item in noticeList" :key="item.id" @click="navigateToDetail(item.id)">
        <view class="notice-header">
          <text class="notice-title">{{ item.title }}</text>
          <text class="notice-time">{{ formatTime(item.send_time) }}</text>
        </view>
        <text class="notice-content">{{ stripHtml(item.content) }}</text>
        <text class="notice-type">{{ item.type }}</text>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>{{ loading ? '加载中...' : '上拉加载更多' }}</text>
      </view>
      <view class="no-more" v-else-if="noticeList.length > 0">
        <text>没有更多数据了</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="noticeList.length === 0 && !loading">
      <image src="/static/androidImg/icon_not_data.png" class="empty-img"></image>
      <text class="empty-text">暂无通知消息</text>
    </view>
  </view>
</template>

<script>
import { getUserNotice } from '../../api/request.js';

export default {
  data() {
    return {
      noticeList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      hasMore: true,
      loading: false
    };
  },

  onLoad() {
    this.loadNoticeList();
  },

  onReachBottom() {
    // 上拉加载更多
    if (this.hasMore && !this.loading) {
      this.loadNoticeList();
    }
  },

  methods: {
    // 加载通知列表
    loadNoticeList() {
      if (this.loading) return;
      
      this.loading = true;
      
      getUserNotice({
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 1 && res.data) {
          const newData = res.data.rows || [];
          
          if (this.page === 1) {
            this.noticeList = newData;
          } else {
            this.noticeList = [...this.noticeList, ...newData];
          }
          
          this.total = res.data.total || 0;
          this.hasMore = this.noticeList.length < this.total;
          
          if (this.hasMore) {
            this.page++;
          }
        } else {
          uni.showToast({
            title: res.msg || '获取通知列表失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('获取通知列表失败:', err);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      }).finally(() => {
        this.loading = false;
      });
    },

    // 跳转到通知详情
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/my/noticeDetail?id=${id}`
      });
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';
      // 这里可以根据需要格式化时间
      return timeStr;
    },

    // 去除HTML标签
    stripHtml(html) {
      if (!html) return '';
      // 简单的HTML标签去除
      return html.replace(/<[^>]+>/g, '');
    }
  }
};
</script>

<style lang="scss">
.notice-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;

  .notice-list {
    padding: 20rpx;
  }

  .notice-item {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 8px;
    margin-bottom: 20rpx;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2rpx);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .notice-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;

      .notice-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 20rpx;
      }

      .notice-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .notice-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 15rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .notice-type {
      font-size: 24rpx;
      color: #ff6b00;
      background-color: #fff5ee;
      padding: 4rpx 16rpx;
      border-radius: 16rpx;
    }
  }

  .load-more,
  .no-more {
    text-align: center;
    padding: 30rpx 0;
    color: #999;
    font-size: 28rpx;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;

    .empty-img {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>